<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #root {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        #root {
            display: flex;
            background-color: yellow;
        }

        .menu {
            width: 200px;
            transition: all .5s;
            padding-top: 20px;

        }

        .menu h4 {
            padding: 10px;
        }

        .menu h4:hover {
            color: #fff;

        }

        .main {
            flex: 1;
            background-color: #fff;
        }

        .main .head {
            background-color: pink;
            width: 100%;
            height: 80px;
            margin-bottom: 30px;
            box-shadow: 0 1px 4px rgb(0 21 41 / 30%);
            display: flex;
            align-items: center;
        }

        .main .content {

            height: 50%;
            /* margin: 25px 0; */
            width: 95%;
            margin: auto;
            /* background-color: #fff; */
            /* overflow-y:scroll; */
        }

        .main .content>h1 {
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);
            background-color: #fff;
            height: 50%;
            padding: 50px;
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3180693_fi8l9m68gyt.css">
    <div id="root">
        <div class="menu" :style="{width:menuWidth}">
            <h4 @click="who = 'index'"><span class="iconfont icon-caidan"></span> {{menuWidth==='200px'? '后台首页':'后台'}}
            </h4>
            <h4 @click="who = 'goods'"><span class="iconfont icon-caidan"></span> {{'商品列表' | menuTitle(menuWidth)}}</h4>
            <h4 @click="who = 'orders'"><span class="iconfont icon-caidan"></span> {{'订单列表' | menuTitle(menuWidth)}}
            </h4>
        </div>
        <div class="main">
            <div class="head">
                <!-- <button @click="changeMenuFn">切换菜单</button> -->
                <span class="iconfont icon-caidan1" style="padding-left: 5px;" @click="changeMenuFn"></span>
                <span>&nbsp;&nbsp;&nbsp;首页&gt;</span>


                <!-- <span style="display:inline-block" v-for="item in [
                            {id:1,token:'index',name1:'首页管理&gt;',name2:'后台首页'},
                            {id:2,token:'goods',name1:'商品管理&gt;',name2:'商品列表'},
                            {id:3,token:'orders',name1:'订单管理&gt;',name2:'订单列表'},
                        ]" v-if="who == item.token" class="animated fadeOutLeftBig">{{item.name1}}{{item.name2}}</span> -->


                <!-- 当template里面有多个相同标签不能加特效，通过使用不同的标签名 或者每个标签加不同的key属性 -->
                <transition appear mode="out-in" enter-active-class="animated fadeOutLeftBig"
                    leave-active-class="animated fadeOutRight">
                    <span :key="item.token" style="display:inline-block" v-for="item in [
                                {id:1,token:'index',name1:'首页管理&gt;',name2:'后台首页'},
                                {id:2,token:'goods',name1:'商品管理&gt;',name2:'商品列表'},
                                {id:3,token:'orders',name1:'订单管理&gt;',name2:'订单列表'},
                            ]" v-if="who == item.token">{{item.name1}}{{item.name2}}</span>
                </transition>

                <span style="font-size:16px;position: absolute; right: 20px;top: 32px;">🐒</span>


            </div>

            <div class="content">
                <!-- appear 首次渲染触发 -->
                <transition appear mode="out-in" enter-active-class="animated fadeOutLeftBig"
                    leave-active-class="animated fadeOutRight">
                    <component :is="who"></component>
                </transition>
            </div>

        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('index', { template: `<h1>后台首页</h1>` })
        Vue.component('goods', { template: `<h1>商品列表</h1>` })
        Vue.component('orders', { template: `<h1>订单列表</h1>` })
        // 过滤器解决菜单切换文字问题
        Vue.filter('menuTitle', (data, menuWidth) => {
            return menuWidth === '200px' ? data : data.substr(0, 2)
        })
        const vm = new Vue({
            el: "#root",
            data: {
                who: 'index',
                menuWidth: '200px'
            },
            methods: {
                changeMenuFn() {
                    this.menuWidth = this.menuWidth === '200px' ? '80px' : '200px'
                }
            }
        })
    </script>
</body>

</html>